<template>
    <div class="container">
        <el-form
            :model="ruleForm"
            ref="ruleForm"
            :rules="rules"
            :label-position="labelPosition"
            label-width="120px"
            class="demo-ruleForm"
        >
            <el-row>
                <el-col :span="12">
                    <el-form-item label="类别：" prop="type">
                        <template>
                            <el-select
                                v-model="ruleForm.type"
                                style="width:300px"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item in typeList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </template>
                    </el-form-item>

                    <el-form-item label="品名：" prop="inputsName">
                        <el-input
                            placeholder="请输入内容"
                            v-model="ruleForm.inputsName"
                            style="width:300px"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="投入品照片：">
                        <el-upload
                            class="upload-poster"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                            :on-change="imgPreview"
                            :auto-upload="false"
                        >
                            <img v-if="inputsImg" :src="inputsImg" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>jpg、png、gif格式，60x60像素，不超过2MB
                    </el-form-item>
                    <el-form-item label="规格：" prop="spec">
                        <el-input placeholder="请输入" v-model="ruleForm.spec" style="width: 200px">
                            <template slot="append">
                                <el-select
                                    v-model="ruleForm.specUnits"
                                    placeholder="单位"
                                    style="width:80px !important"
                                >
                                    <el-option
                                        v-for="item in unitsList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.name"
                                    ></el-option>
                                </el-select>
                            </template>
                        </el-input>
                        <el-button style="margin-left:20px" @click="toUntis">单位管理</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="来源：" prop="source">
                        <el-input placeholder="请输入内容" v-model="ruleForm.source" style="width:300px"></el-input>
                    </el-form-item>
                    <el-form-item label="供应商名称：">
                        <template>
                            <el-select
                                v-model="name"
                                @change="changeSupply"
                                style="width:300px"
								value-key="id"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item in supplyList"
                                    :key="item.id"
                                    :label="item.supplierName"
                                    :value="item"
                                ></el-option>
                            </el-select>
                        </template>
                    </el-form-item>
                    <el-form-item label="生产日期：">
                        <el-date-picker
                            v-model="ruleForm.producedTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder
                            style="width:300px"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="保质期：">
                        <el-input v-model="ruleForm.expirationDate" style="width: 275px"></el-input>
                        <span style="margin-left:10px;">月</span>
                    </el-form-item>
                    <el-form-item label="购买时间：" prop="buyTime">
                        <el-date-picker
                            v-model="ruleForm.buyTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder
                            style="width:300px"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="数量：" prop="totalNumber">
                        <el-input
                            placeholder="请输入"
                            v-model="ruleForm.totalNumber"
                            style="width: 200px"
                        >
                            <template slot="append">
                                <el-select
                                    v-model="ruleForm.units"
                                    placeholder="单位"
                                    style="width:80px !important"
                                >
                                    <el-option
                                        v-for="item in unitsList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.name"
                                    ></el-option>
                                </el-select>
                            </template>
                        </el-input>
                        <el-button style="margin-left:20px" @click="toUntis">单位管理</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="22">
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="ruleForm.remark"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item class="footerFixed" label-width="0px">
                <el-button type="primary" @click="submitrule('ruleForm')">提交</el-button>
                <el-button @click="backPage">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { inputs_save, unit_findByList, supplier_findByAll, inputs_findById } from '@/request/api';
import uploadImg from '../../../common/uploadImg';
export default {
    data() {
        return {
            labelPosition: 'right',
            name: '',
            file: '',
            inputsImg: '',
            ruleForm: {
                files:''
            },
            typeList: [
                {
                    value: '肥料',
                    label: '肥料'
                },
                {
                    value: '农药',
                    label: '农药'
                },
                {
                    value: '其他',
                    label: '其他'
                }
            ],
            unitsList: [],
            supplyList: [],
            rules: {
                type: [{ required: true, message: '不能为空', trigger: 'change' }],
                source: [{ required: true, message: '不能为空', trigger: 'blur' }],
                inputsName: [{ required: true, message: '不能为空', trigger: 'blur' }],
                supplyName: [{ required: true, message: '不能为空', trigger: 'change' }],
                spec: [{ required: true, message: '不能为空', trigger: 'blur' }],
                buyTime: [{ required: true, message: '不能为空', trigger: 'change' }],
                totalNumber: [{ required: true, message: '不能为空', trigger: 'blur' }]
            }
        };
    },
    mounted() {
        this.id = this.$route.query.id;
        if (this.id == undefined) {
            
        } else {
            inputs_findById(this.id).then((res) => {
                this.ruleForm = res.data;
                this.name = res.data.supplyName;
                if(this.ruleForm.inputsImg == "" || this.ruleForm.inputsImg == null){
                    this.ruleForm.inputsImg = this.ruleForm.inputsImg
                }else{
                    this.inputsImg = this.$store.state.imageUrls + this.ruleForm.inputsImg
                }
            });
        }
        this.init();
    },
    methods: {
        toUntis() {
            this.$router.push({
                path: '../unit'
            });
        },
        changeSupply(ele) {
            this.ruleForm.supplyId = ele.id;
            this.ruleForm.supplyName = ele.supplierName;
            this.ruleForm.userName = ele.userName;
            this.ruleForm.phone = ele.phone;
        },
        imgPreview(file,fileList){
             this.inputsImg =  URL.createObjectURL(file.raw);
            let fileName = file.name;
            let regex = /(.jpg|.gif|.png)$/;
            if (regex.test(fileName.toLowerCase())) {
                this.ruleForm.files = file.raw
                this.ruleForm.inputsImg = file.name
            } else {
                this.$message.error('请选择图片文件');
            }
        },
        backPage() {
            this.$router.go(-1);
        },
        init() {
            unit_findByList('').then((res) => {
                // if (res.code == 200) {
                    this.unitsList = res.data;
                // }
            });
            supplier_findByAll('').then((res) => {
                // if (res.code == 200) {
                    this.supplyList = res.data;
                // }
            });
        },
        submitrule(formName) {
            if (this.ruleForm.specUnits == null || this.ruleForm.specUnits == "") {
                alert("规格单位为必填");
                return false;
            }
            if (this.ruleForm.units == null || this.ruleForm.units == "") {
                alert("数量单位为必填");
                return false;
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let formdata = new FormData();
                    for (var a in this.ruleForm) {
                        if (this.ruleForm[a] == null || this.ruleForm[a] == 'null') {
                            this.ruleForm[a] = '';
                            formdata.append(a, '');
                        } else {
                            formdata.append(a, this.ruleForm[a]);
                        }
                    }
                    inputs_save(formdata).then((res) => {
                        this.$notify({
                            title: '提示',
                            message: '保存成功',
                            type: 'success',
                            duration: 1000
                        });
                        this.$router.go(-1);
                    });
                } else {
                    return false;
                }
            });
        }
    }
};
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width:180px;
    overflow: hidden;
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .el-upload--text{
      width:180px;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>